/* Profile 边框
------------------------------------*/
.g-brd-around {
  border: solid 1px transparent !important;
}

.g-brd-gray-light-v4 {
  border-color: #eee !important;
}

.g-pa-20 {
  padding: 1.42857rem !important;
}

.g-mb-20 {
  margin-bottom: 1.42857rem !important;
}

.g-mb-10 {
  margin-bottom: 0.71429rem !important;
}

.g-mb-5 {
  margin-bottom: 0.35714rem !important;
}

.g-mb-40 {
  margin-bottom: 2.85714rem !important;
}

.g-mb-0--lg {
  margin-bottom: 0 !important;
}

.g-py-12 {
  padding-top: 0.85714rem !important;
  padding-bottom: 0.85714rem !important;
}

.g-rounded-50 {
  border-radius: 50px !important;
}

/* Button Styles
------------------------------------*/
/* General Button Styles */
.btn {
  position: relative;
  transition: .2s ease;
  cursor: pointer;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
  outline: 0 none;
  box-shadow: none;
}


/*------------------------------------
   Outline Buttons
------------------------------------*/
/* Outline Button Primary */
.u-btn-outline-primary {
  color: #72c02c;
  border-color: #72c02c;
  background-color: transparent;
}

.u-btn-outline-primary:focus, .u-btn-outline-primary.active {
  color: #fff;
  background-color: #72c02c;
}

.u-btn-outline-primary:hover {
  color: #fff;
  background-color: #72c02c;
}

/* Button Outline Red */
.u-btn-outline-red {
  color: #f00;
  border-color: #f00;
  background-color: transparent;
}

.u-btn-outline-red:focus, .u-btn-outline-red.active {
  color: #fff;
  background-color: #f00;
}

.u-btn-outline-red:hover {
  color: #fff;
  background-color: #f00;
}

/*------------------------------------
  Positions
------------------------------------*/
.g-pos-rel {
  position: relative !important;
}

.g-top-1 {
  top: 0.07143rem;
}

.g-top-2 {
  top: 0.14286rem;
}

.g-top-3 {
  top: 0.21429rem;
}

.g-top-5 {
  top: 0.35714rem;
}

.g-mr-5 {
  margin-right: 0.35714rem !important;
}

.g-my-20 {
  margin-top: 1.42857rem !important;
  margin-bottom: 1.42857rem !important;
}

.g-my-50 {
  margin-top: 3.57143rem !important;
  margin-bottom: 3.57143rem !important;
}

.g-font-weight-300 {
  font-weight: 300;
}

.g-font-size-11 {
  font-size: 0.78571rem !important;
}

.g-line-height-1_8 {
  line-height: 1.8 !important;
}

.list-group-item {
  border-color: #eee;
}

.g-px-8 {
  padding-left: 0.57143rem !important;
  padding-right: 0.57143rem !important;
}

.g-rounded-20 {
  border-radius: 20px !important;
}

.g-bg-pink {
  background-color: #e81c62 !important;
}

.g-bg-cyan {
  background-color: #00bed6 !important;
}

/* Primary Colors */
.g-bg-primary {
  background-color: #72c02c !important;
}

.g-bg-primary--hover:hover {
  background-color: #72c02c !important;
}

.u-block-hover:hover .g-bg-primary--hover {
  background-color: #72c02c;
}

.g-parent:hover .g-bg-primary--parent-hover {
  background-color: #72c02c !important;
}

.g-bg-primary--active.active,
.active .g-bg-primary--active {
  background-color: #72c02c !important;
}

.g-parent.active .g-bg-primary--parent-active {
  background-color: #72c02c !important;
}

.g-bg-primary--before::before, .g-bg-primary--after::after {
  background-color: #72c02c !important;
}

/* Color Aqua */
.g-bg-aqua {
  background-color: #29d6e6 !important;
}

.g-bg-aqua-opacity-0_1 {
  background-color: rgba(41, 214, 230, 0.1) !important;
}

.g-bg-aqua-opacity-0_9 {
  background-color: rgba(41, 214, 230, 0.9) !important;
}

.g-bg-aqua--hover:hover {
  background-color: #29d6e6 !important;
}

/* Color Blue */
.g-bg-blue {
  background-color: #3398dc !important;
}

.g-bg-blue-opacity-0_1 {
  background-color: rgba(51, 152, 220, 0.1) !important;
}

.g-bg-blue-opacity-0_7 {
  background-color: rgba(51, 152, 220, 0.7) !important;
}

.g-bg-blue-opacity-0_9 {
  background-color: rgba(51, 152, 220, 0.9) !important;
}

.g-bg-blue--hover:hover {
  background-color: #3398dc !important;
}

/* Color Purple */
.g-bg-purple {
  background-color: #9a69cb !important;
}

.g-bg-purple-opacity-0_1 {
  background-color: rgba(154, 105, 203, 0.1) !important;
}

.g-bg-purple-opacity-0_7 {
  background-color: rgba(154, 105, 203, 0.7) !important;
}

.g-bg-purple-opacity-0_9 {
  background-color: rgba(154, 105, 203, 0.9) !important;
}

.g-bg-purple-opacity-0_9--after::after {
  background-color: rgba(154, 105, 203, 0.9) !important;
}

.g-bg-purple--hover:hover {
  background-color: #9a69cb !important;
}

/* Color Pink */
.g-bg-pink {
  background-color: #e81c62 !important;
}

.g-bg-pink-opacity-0_1 {
  background-color: rgba(232, 28, 98, 0.1) !important;
}

.g-bg-pink-opacity-0_9 {
  background-color: rgba(232, 28, 98, 0.9) !important;
}

.g-bg-pink--hover:hover {
  background-color: #e81c62 !important;
}

.g-bg-pink--before::after, .g-bg-pink--after::after {
  background-color: #e81c62 !important;
}

.g-bg-pink--before--hover:hover::after, .g-bg-pink--after--hover:hover::after {
  background-color: #e81c62 !important;
}

/*------------------------------------
Background Colors
------------------------------------*/
.u-label {
  display: inline-block;
  padding: .35rem .58rem;
  font-size: .9rem;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  /* Label Size
  ------------------------------------*/
  /* Label Styles
  ------------------------------------*/
  /* Label Num
  ------------------------------------*/
}

.u-label:empty {
  display: none;
}

.btn .u-label {
  position: relative;
  top: -1px;
}

.u-label-default {
  background-color: #777;
}

.u-label-default[href]:hover, .u-label-default[href]:focus {
  background-color: #555;
}

.u-label-primary {
  background-color: #5cb85c;
}

.u-label-primary[href]:hover, .u-label-primary[href]:focus {
  background-color: #55b555;
}

.u-label-success {
  background-color: #5cb85c;
}

.u-label-success[href]:hover, .u-label-success[href]:focus {
  background-color: #55b555;
}

.u-label-info {
  background-color: #5bc0de;
}

.u-label-info[href]:hover, .u-label-info[href]:focus {
  background-color: #53bddc;
}

.u-label-warning {
  background-color: #f0ad4e;
}

.u-label-warning[href]:hover, .u-label-warning[href]:focus {
  background-color: #efa945;
}

.u-label-danger {
  background-color: #d9534f;
}

.u-label-danger[href]:hover, .u-label-danger[href]:focus {
  background-color: #d74b47;
}

.u-label.g-rounded-10 {
  padding: .35rem .7rem;
}

.u-label--sm {
  font-size: .8rem;
}

.u-label--lg {
  font-size: 1.1rem;
}

.u-label.u-label-with-icon {
  padding: .5rem .85rem;
}

.u-label.u-label-with-icon i {
  margin-right: .5rem;
}

.u-label-num {
  min-width: 2rem;
  height: 2rem;
  padding: 0 .35rem;
  line-height: 2rem;
}

.u-label-num.u-label--sm {
  min-width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
}

.u-label-num.u-label--lg {
  min-width: 2.2rem;
  height: 2.2rem;
  line-height: 2.2rem;
}


/* 头像 */
.g-mb-30 {
  margin-bottom: 2.14286rem !important;
}

[class*="u-block-hover"], [class*="u-block-hover"]::before, [class*="u-block-hover"]::after {
  transition: all .3s ease;
}

/*------------------------------------
  Block Hovers
------------------------------------*/
[class*="u-block-hover"] {
  position: relative;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

[class*="u-block-hover"], [class*="u-block-hover"]::before, [class*="u-block-hover"]::after {
  transition: all .3s ease;
}

.u-block-hover--uncroped {
  overflow: visible;
}

.u-block-hover--uncroped:hover {
  z-index: 2;
}

.u-block-hover__img {
  max-width: 100%;
  vertical-align: top;
}

.u-block-hover__block {
  min-height: 100%;
}

/*------------------------------------
  Box-shadows-v21
------------------------------------*/
.u-shadow-v21 {
  box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.09);
  transition-property: all;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-duration: .3s;
}

.u-shadow-v21--hover:hover {
  box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.15);
}


figure {
  margin-bottom: 0;
}

.g-pa-30 {
  padding: 2.14286rem !important;
}

.g-transition--ease-in-out {
  transition-timing-function: ease-in-out;
}

.g-transition-0_3 {
  transition-duration: .3s;
}

.g-rounded-4 {
  border-radius: 4px !important;
}

/* White Colors */
.g-bg-white {
  background-color: #fff !important;
}

.g-bg-white--before::before, .g-bg-white--after::after {
  background-color: #fff !important;
}

.g-bg-white--hover:hover, .g-bg-white--active.active {
  background-color: #fff !important;
}

.g-parent:hover .g-bg-white--parent-hover {
  background-color: #fff !important;
}

.g-bg-white--before::before, .g-bg-white--after::after {
  background-color: #fff !important;
}

.g-parent:hover .g-bg-white-opacity-0--after--parent-hover::after {
  background-color: rgba(255, 255, 255, 0) !important;
}


/*------------------------------------
  Transitions
------------------------------------*/
[class*="g-transition"] {
  transition-property: all;
  transition-timing-function: ease;
  transition-delay: 0s;
}

[class*="g-transition"]::before, [class*="g-transition"]::after,
[class*="g-transition"] path,
[class*="g-transition"] polygon {
  transition-property: all;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.g-transition-0_2 {
  transition-duration: .2s;
}

.g-transition-0_2::before, .g-transition-0_2::after,
.g-transition-0_2 path,
.g-transition-0_2 polygon {
  transition-duration: .2s;
}

.g-transition-0_3 {
  transition-duration: .3s;
}

.g-transition-0_3::before, .g-transition-0_3::after,
.g-transition-0_3 path,
.g-transition-0_3 polygon {
  transition-duration: .3s;
}

.g-transition-0_5 {
  transition-duration: .5s;
}

.g-transition-0_5::before, .g-transition-0_5::after,
.g-transition-0_5 path,
.g-transition-0_5 polygon {
  transition-duration: .5s;
}

.g-transition-0_6 {
  transition-duration: .6s;
}

.g-transition-0_6::before, .g-transition-0_6::after,
.g-transition-0_6 path,
.g-transition-0_6 polygon {
  transition-duration: .6s;
}

.g-transition-delay-0_11 {
  transition-delay: .11s;
}

.g-transition-delay-0_11::before, .g-transition-delay-0_11::after,
.g-transition-delay-0_11 path,
.g-transition-delay-0_11 polygon {
  transition-delay: .11s;
}

.g-transition-delay-0_2 {
  transition-delay: .2s;
}

.g-transition-delay-0_2::before, .g-transition-delay-0_2::after,
.g-transition-delay-0_2 path,
.g-transition-delay-0_2 polygon {
  transition-delay: .2s;
}

.g-transition-delay-0_45 {
  transition-delay: .45s;
}

.g-transition-delay-0_45::before, .g-transition-delay-0_45::after,
.g-transition-delay-0_45 path,
.g-transition-delay-0_45 polygon {
  transition-delay: .45s;
}

.g-transition--ease-out {
  transition-timing-function: ease-out;
}

.g-transition--ease-out::before, .g-transition--ease-out::after,
.g-transition--ease-out path,
.g-transition--ease-out polygon {
  transition-timing-function: ease-out;
}

.g-transition--ease-in {
  transition-timing-function: ease-in;
}

.g-transition--ease-in::before, .g-transition--ease-in::after,
.g-transition--ease-in path,
.g-transition--ease-in polygon {
  transition-timing-function: ease-in;
}

.g-transition--ease-in-out {
  transition-timing-function: ease-in-out;
}

.g-transition--ease-in-out::before, .g-transition--ease-in-out::after,
.g-transition--ease-in-out path,
.g-transition--ease-in-out polygon {
  transition-timing-function: ease-in-out;
}

.g-transition--linear {
  transition-timing-function: linear;
}

.g-transition--linear::before, .g-transition--linear::after,
.g-transition--linear path,
.g-transition--linear polygon {
  transition-timing-function: linear;
}


/* figure pic */

.g-height-80 {
  height: 80px !important;
}
.g-width-80 {
  width: 80px !important;
  /* P */
}

.g-font-weight-600 {
  font-weight: 600;
}

.g-font-size-16 {
  font-size: 1.14286rem !important;
}

.g-mx-3 {
  margin-left: 0.21429rem !important;
  margin-right: 0.21429rem !important;
}


/* About me 分隔栏 */
/* Gray Colors */
.g-color-gray-light-v1 {
  color: #bbb !important;
}

.g-brd-gray-light-v2 {
  border-color: #ccc !important;
}

.g-bg-gray-light-v4 {
  background-color: #eee !important;
}

.u-divider-center {
  text-align: center;
}

.u-divider {
  position: relative;
  border-top-width: 1px;
}

/* Double Dashed Divider */
.u-divider-db-dashed {
  height: 5px;
  border-top: 1px dashed transparent;
  border-bottom: 1px dashed transparent;
}

.u-divider-center .u-divider__icon {
  left: auto;
  right: auto;
  margin-left: -1.42857rem;
}

.u-divider__icon {
  position: absolute;
  top: -1.42857rem;
  width: 2.85714rem;
  height: 2.85714rem;
  font-size: 1.28571rem;
  line-height: 2.85714rem;
  text-align: center;
  font-style: normal;
}

.u-divider__icon--indented {
  box-shadow: 0 0 0 15px #fff;
}

.g-mt-50 {
  margin-top: 3.57143rem !important;
}

/* 博客列表 */
.card,
.card-header {
  border-color: #eee;
}
.card-header {
  padding: 0.71429rem 1.07143rem;
}
.card-block {
  padding: 1.07143rem;
}

.g-mb-10 {
  margin-bottom: 0.71429rem !important;
}
.g-mb-0--md {
  margin-bottom: 0 !important;
}
.g-mb-15 {
  margin-bottom: 1.07143rem !important;
}
.g-pa-5 {
  padding: 0.35714rem !important;
}
.g-mr-minus-5 {
  margin-right: -0.35714rem !important;
}
/*------------------------------------
  Cursors
------------------------------------*/
.g-cursor-pointer {
  cursor: pointer;
}
.g-mt-10 {
  margin-top: 0.71429rem !important;
}
/* Rounded Around */
.rounded-0 {
  border-radius: 0 !important;
}
.dropdown-menu {
  min-width: 15rem;
  padding: 0;
}
.dropdown-item {
  padding: 0.21429rem 1.07143rem;
}
.g-px-10 {
  padding-left: 0.71429rem !important;
  padding-right: 0.71429rem !important;
}

.g-bg-gray-light-v5 {
  background-color: #f7f7f7 !important;
}

.g-bg-gray-light-v5--hover:hover {
  background-color: #f7f7f7 !important;
}

.g-bg-gray-light-v5--active.active,
.active .g-bg-gray-light-v5--active {
  background-color: #f7f7f7 !important;
}

.g-color-gray-dark-v5 {
  color: #999 !important;
}
.g-font-size-12 {
  font-size: 0.85714rem !important;
}
@media (min-width: 0) {
  .g-pa-0 {
    padding: 0 !important;
  }
}
.g-ml-5 {
  margin-left: 0.35714rem !important;
}
.g-mr-20 {
  margin-right: 1.42857rem !important;
}
.g-mt-3 {
  margin-top: 0.21429rem !important;
}
.g-height-50 {
  height: 50px;
}
.g-width-50 {
  width: 50px !important;
  /* P */
}
.g-mb-10--sm {
  margin-bottom: 0.71429rem !important;
}
.g-mb-15 {
  margin-bottom: 1.07143rem !important;
}

@media (min-width: 576px) {
  .g-mb-0--sm {
    margin-bottom: 0 !important;
  }
}
.g-mr-10 {
  margin-right: 0.71429rem !important;
}

/*------------------------------------
  Typography Text Decoration
------------------------------------*/
.g-text-underline {
  text-decoration: underline;
}

.g-text-underline--none--hover:focus, .g-text-underline--none--hover:hover {
  text-decoration: none;
}

.g-text-strike {
  text-decoration: line-through;
}

/* Button Sizes
------------------------------------*/
/* Extra Small */
.btn-xs {
  line-height: 1.4;
  padding: 0.14286rem 0.5rem;
  font-size: 0.78571rem;
}


/* 博客详情页 */
/* Primary Colors */
.g-color-primary {
  color: #72c02c !important;
}
.g-pb-15 {
  padding-bottom: 1.07143rem !important;
}
.g-pb-50 {
  padding-bottom: 3.57143rem !important;
}
.g-pt-30 {
  padding-top: 2.14286rem !important;
}
.g-pt-50 {
  padding-top: 3.57143rem !important;
}
.g-mb-50 {
  margin-bottom: 3.57143rem !important;
}
.g-mb-60 {
  margin-bottom: 4.28571rem !important;
}
.g-mb-0--lg {
  margin-bottom: 0 !important;
}
.g-color-gray-dark-v4 {
  color: #777 !important;
}
.g-my-15 {
  margin-top: 1.07143rem !important;
  margin-bottom: 1.07143rem !important;
}
.g-brd-gray-light-v4 {
  border-color: #eee !important;
}

.u-link-v5 {
  text-decoration: none;
  transition: all .2s;
}

.u-link-v5:hover, .u-link-v5:focus {
  text-decoration: none;
}

/* Primary Colors */
.g-color-primary {
  color: #72c02c !important;
}

.u-block-hover:hover .g-color-primary--hover, .g-color-primary--hover:hover {
  color: #72c02c !important;
}

.g-parent:hover .g-color-primary--parent-hover {
  color: #72c02c !important;
}

.g-color-primary-opacity-0_3 {
  color: rgba(114, 192, 44, 0.3) !important;
}

.g-color-primary-opacity-0_4 {
  color: rgba(114, 192, 44, 0.4) !important;
}

.g-color-primary--before::before, .g-color-primary--after::after {
  color: #72c02c;
}

/* Outline Button Aqua */
.u-btn-outline-aqua {
  color: #29d6e6;
  border-color: #29d6e6;
  background-color: transparent;
}

.u-btn-outline-aqua:focus, .u-btn-outline-aqua.active {
  color: #fff;
  background-color: #29d6e6;
}

.u-btn-outline-aqua:hover {
  color: #fff;
  background-color: #29d6e6;
}

/* 防止评论框使用 media-body 页面缩小时会被撑爆 */
.media-body {
  min-width: 0;
}

/*------------------------------------
  Error state v1
------------------------------------*/
.u-has-error-v1 .form-control,
.u-has-error-v1 .input-group-addon,
.u-has-error-v1 [class*="u-select"] {
  background-color: #fff0f0;
}

.u-has-error-v1 .form-control[readonly],
.u-has-error-v1 .input-group-addon[readonly],
.u-has-error-v1 [class*="u-select"][readonly] {
  background-color: #fff0f0;
}

.u-has-error-v1 .form-control-feedback {
  color: #f00;
}

.u-has-error-v1 [class*="u-check-icon"] {
  background-color: #fff0f0;
}

.g-pt-15 {
  padding-top: 1.07143rem !important;
}


@media (max-width: 767px) {
  .g-hidden-sm-down {
    display: none !important;
  }
}

.g-pa-12-19 {
  padding: 0.85714rem 1.35714rem !important;
}
.g-pa-12-21 {
  padding: 0.85714rem 1.5rem !important;
}
.g-rounded-50 {
  border-radius: 50px !important;
}

/*------------------------------------
  Paginations
------------------------------------*/
/* Pagination v1 */
.u-pagination-v1__item {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border: solid 1px transparent;
  transition: all .3s ease;
}

.u-pagination-v1__item--active, .u-pagination-v1__item:hover, .u-pagination-v1__item:focus {
  text-decoration: none;
  cursor: pointer;
}

.u-pagination-v1__item-info {
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.u-pagination-v1__item--disabled {
  opacity: .5;
  pointer-events: none;
}

/* Pagination Style v1 */
.u-pagination-v1-1 {
  color: #999;
  border-color: #999;
}

.u-pagination-v1-1--active, .u-pagination-v1-1:hover, .u-pagination-v1-1:focus {
  background-color: #72c02c;
  color: #fff;
  border-color: #72c02c;
}

/* Pagination Style v2 */
.u-pagination-v1-2 {
  color: #555;
  border-color: #555;
}

.u-pagination-v1-2:hover, .u-pagination-v1-2:focus {
  color: #72c02c;
  border-color: #72c02c;
}

.u-pagination-v1-2--active, .u-pagination-v1-2--nav {
  background-color: #72c02c;
  color: #fff;
  border-color: #72c02c;
}

.u-pagination-v1-2--active:hover, .u-pagination-v1-2--active:focus, .u-pagination-v1-2--nav:hover, .u-pagination-v1-2--nav:focus {
  color: #fff;
}

.u-pagination-v1-2--nav:hover {
  background-color: rgba(114, 192, 44, 0.8);
}

/* Pagination Style v3 */
.u-pagination-v1-3 {
  color: #333;
  border-color: #333;
}

.u-pagination-v1-3--active, .u-pagination-v1-3:hover, .u-pagination-v1-3:focus {
  background-color: #333;
  color: #fff;
  border-color: #333;
}

/* Pagination Style v4 */
.u-pagination-v1-4 {
  color: #333;
  border-color: transparent;
}

.u-pagination-v1-4:hover, .u-pagination-v1-4:focus {
  color: #72c02c;
  border-color: #72c02c;
}

.u-pagination-v1-4--active {
  color: #fff;
  background-color: #72c02c;
  border-color: #72c02c;
}

.u-pagination-v1-4--active:hover, .u-pagination-v1-4--active:focus {
  color: #fff;
}

/* Outline Button Purple */
.u-btn-outline-purple {
  color: #9a69cb;
  border-color: #9a69cb;
  background-color: transparent;
}

.u-btn-outline-purple:focus, .u-btn-outline-purple.active {
  color: #fff;
  background-color: #9a69cb;
}

.u-btn-outline-purple:hover {
  color: #fff;
  background-color: #9a69cb;
}

.g-pt-70 {
  padding-top: 5rem !important;
}
.g-pt-75 {
  padding-top: 5.35714rem !important;
}
.g-pt-80 {
  padding-top: 5.71429rem !important;
}
.g-pt-85 {
  padding-top: 6.07143rem !important;
}
.g-pt-90 {
  padding-top: 6.42857rem !important;
}
.g-pt-95 {
  padding-top: 6.78571rem !important;
}
.g-pt-100 {
  padding-top: 7.14286rem !important;
}

/* TOC */
/*------------------------------------
  Heading-v3
------------------------------------*/
[class*="u-heading-v3-"] {
  border-bottom: 1px dotted #ccc;
}

.u-heading-v3__title {
  position: relative;
  top: 1px;
  display: inline-block;
  margin: 0;
  padding-bottom: 0.71429rem;
  border-bottom: 1px solid #555;
}
/*------------------------------------
  Headings
------------------------------------*/
/* Massive Underline */
.u-heading-massive-underline {
  position: relative;
}

.u-heading-massive-underline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2em;
  height: .3em;
  background-color: rgba(114, 192, 44, 0.8);
  z-index: -1;
}


/*------------------------------------
  List Styles
------------------------------------*/
.u-list-inline {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.img-bordered {
  border: solid 6px #777;
}

.g-order-1 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.g-order-2 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}

@media (min-width: 576px) {
  .g-order-1--sm {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  .g-order-2--sm {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
}

@media (min-width: 768px) {
  .g-order-1--md {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  .g-order-2--md {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
}

@media (min-width: 992px) {
  .g-order-1--lg {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  .g-order-2--lg {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
}

/* Color Aqua */
.g-color-aqua {
  color: #29d6e6;
}
/* Color Deep Orange */
.g-color-deeporange {
  color: #fe541e !important;
}

.g-color-deeporange--hover:hover {
  color: #fe541e !important;
}
/*------------------------------------
  Link Styles
------------------------------------*/
.u-link-v5 {
  text-decoration: none;
  transition: all .2s;
}

.u-link-v5:hover, .u-link-v5:focus {
  text-decoration: none;
}

/* Color Red */
.g-color-red {
  color: #f00 !important;
}

.g-color-red--hover:hover {
  color: #f00 !important;
}

/* Color Aqua */
.g-color-aqua {
  color: #29d6e6;
}

.g-color-aqua--hover:hover {
  color: #29d6e6 !important;
}

.g-color-aqua-dark-v1 {
  color: #11848e !important;
}

.g-ml-15 {
  margin-left: 1.07143rem !important;
}
.g-ml-40 {
  margin-left: 2.85714rem !important;
}

/* Tab nav */
@media (min-width: 768px) {
  .g-brd-x--md {
    border-left: solid 1px transparent !important;
    border-right: solid 1px transparent !important;
  }
  .g-brd-around--md {
    border: solid 1px transparent !important;
  }
  .g-brd-top--md {
    border-top: solid 1px transparent !important;
  }
  .g-brd-right--md {
    border-right: solid 1px transparent !important;
  }
  .g-brd-bottom--md {
    border-bottom: solid 1px transparent !important;
  }
  .g-brd-left--md {
    border-left: solid 1px transparent !important;
  }
}
/* Rounded Bottom */
.g-rounded-bottom-0 {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
/*------------------------------------
  Tabs v1
------------------------------------*/
/* Tabs v1
------------------------------------*/
@media (min-width: 768px) {
  [class*="u-nav-v1"].u-nav-rounded-3 .nav-link {
    border-radius: 3px;
  }
  [class*="u-nav-v1"].u-nav-rounded-5 .nav-link {
    border-radius: 5px;
  }
  [class*="u-nav-v1"].u-nav-rounded-7 .nav-link {
    border-radius: 7px;
  }
  [class*="u-nav-v1"].u-nav-rounded-10 .nav-link {
    border-radius: 10px;
  }
  .u-nav-v1-1 .nav-link.active {
    background-color: #eee;
  }
  .u-nav-v1-1.u-nav-primary .nav-link.active {
    color: #fff;
    background-color: #72c02c;
  }
  .u-nav-v1-1.u-nav-dark .nav-link.active {
    color: #fff;
    background-color: #333;
  }
  .u-nav-v1-1.u-nav-light .nav-link {
    color: #fff;
  }
  .u-nav-v1-1.u-nav-light .nav-link.active {
    color: #333;
    background-color: #fff;
  }
  .u-nav-v1-2 .nav-link {
    border: solid 1px transparent;
  }
  .u-nav-v1-2 .nav-link.active {
    border-color: #eee;
  }
  .u-nav-v1-2.u-nav-primary .nav-link.active {
    border-color: #72c02c;
  }
  .u-nav-v1-2.u-nav-dark .nav-link.active {
    border-color: #333;
  }
  .u-nav-v1-2.u-nav-light .nav-link {
    color: #fff;
  }
  .u-nav-v1-2.u-nav-light .nav-link.active {
    border-color: #fff;
  }
}

.router-link-active .tab-link{
  color: red;
  background:pink;
}

/* User Settings */
.g-py-30 {
  padding-top: 2.14286rem !important;
  padding-bottom: 2.14286rem !important;
}
.g-px-20 {
  padding-left: 1.42857rem !important;
  padding-right: 1.42857rem !important;
}
.g-pb-3 {
  padding-bottom: 0.21429rem !important;
}
.g-color-text {
  color: #777;
}
.g-pa-3 {
  padding: 0.21429rem !important;
}
.u-link-v5 {
  text-decoration: none;
  transition: all .2s;
}

.u-link-v5:hover, .u-link-v5:focus {
  text-decoration: none;
}
/*------------------------------------
  Icons Styles
------------------------------------*/
.u-icon-v1,
.u-icon-v2,
.u-icon-v3,
.u-icon-v4 {
  position: relative;
  display: inline-block;
  text-align: center;
  transition: all .2s ease-in-out;
}

.u-icon-v1:hover,
.u-icon-v2:hover,
.u-icon-v3:hover,
.u-icon-v4:hover {
  text-decoration: none;
}

.u-icon-v1::before,
.u-icon-v2::before,
.u-icon-v3::before {
  display: block;
}

.u-icon-v1 > i,
.u-icon-v2 > i,
.u-icon-v3 > i,
.u-icon-v4 > span > i {
  position: relative;
  top: 50%;
  display: block;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
}

[class*="u-icon-v"] .u-line-icon-pro {
  -webkit-transform: translateY(-45%);
      -ms-transform: translateY(-45%);
          transform: translateY(-45%);
}

.u-icon-rotation {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.u-icon-rotation .u-icon__elem {
  -webkit-transform: rotate(-45deg) translate(15%, -30%);
      -ms-transform: rotate(-45deg) translate(15%, -30%);
          transform: rotate(-45deg) translate(15%, -30%);
}

.u-icon-rotation .u-line-icon-pro {
  -webkit-transform: rotate(-45deg) translate(25%, -30%);
      -ms-transform: rotate(-45deg) translate(25%, -30%);
          transform: rotate(-45deg) translate(25%, -30%);
}
/*------------------------------------
  Icon-v1
------------------------------------*/
.u-icon-v1,
.u-icon-v1 .u-icon__elem-regular,
.u-icon-v1 .u-icon__elem-hover {
  width: 2.57143rem;
  height: 2.57143rem;
  font-size: 1.42857rem;
}

.u-icon-v1.u-icon-size--xs,
.u-icon-v1.u-icon-size--xs .u-icon__elem-regular,
.u-icon-v1.u-icon-size--xs .u-icon__elem-hover {
  width: 1.64286rem;
  height: 1.64286rem;
  font-size: 0.92857rem;
}

.u-icon-v1.u-icon-size--sm,
.u-icon-v1.u-icon-size--sm .u-icon__elem-regular,
.u-icon-v1.u-icon-size--sm .u-icon__elem-hover {
  width: 2.28571rem;
  height: 2.28571rem;
  font-size: 1.28571rem;
}

.u-icon-v1.u-icon-size--lg,
.u-icon-v1.u-icon-size--lg .u-icon__elem-regular,
.u-icon-v1.u-icon-size--lg .u-icon__elem-hover {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 2.5rem;
}

.u-icon-v1.u-icon-size--xl,
.u-icon-v1.u-icon-size--xl .u-icon__elem-regular,
.u-icon-v1.u-icon-size--xl .u-icon__elem-hover {
  width: 5.14286rem;
  height: 5.14286rem;
  font-size: 2.85714rem;
}

.u-icon-v1.u-icon-size--2xl,
.u-icon-v1.u-icon-size--2xl .u-icon__elem-regular,
.u-icon-v1.u-icon-size--2xl .u-icon__elem-hover {
  width: 5.85714rem;
  height: 5.85714rem;
  font-size: 3.57143rem;
}

.u-icon-v1.u-icon-size--3xl,
.u-icon-v1.u-icon-size--3xl .u-icon__elem-regular,
.u-icon-v1.u-icon-size--3xl .u-icon__elem-hover {
  width: 8rem;
  height: 8rem;
  font-size: 5.71429rem;
}
.g-height-100 {
  height: 100px !important;
}
.g-width-100 {
  width: 100px !important;
  /* P */
}
.g-font-weight-500 {
  font-weight: 500;
}


/*------------------------------------
  修改用户头像的按钮
------------------------------------*/
.u-icon-v3{position:relative;display:inline-block;text-align:center;transition:all .2s ease-in-out;}
.u-icon-v3:hover{text-decoration:none;}
.u-icon-v3::before{display:block;}
.u-icon-v3 > i{position:relative;top:50%;display:block;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:2;}
[class*="u-icon-v"] .u-line-icon-pro{-webkit-transform:translateY(-45%);-ms-transform:translateY(-45%);transform:translateY(-45%);}
.u-icon-v3{width:3.92857rem;height:3.92857rem;font-size:1.57143rem;}
.u-icon-v3.u-icon-size--xs{width:2.14286rem;height:2.14286rem;font-size:0.92857rem;}
.u-icon-v3{width:3.92857rem;height:3.92857rem;font-size:1.57143rem;}
.u-icon-v3.u-icon-size--xs{width:2.14286rem;height:2.14286rem;font-size:0.92857rem;}
.u-icon-v3{background-color:#eee;}
.u-icon-v3{width:3.92857rem;height:3.92857rem;font-size:1.57143rem;}
.u-icon-v3.u-icon-size--xs{width:2.14286rem;height:2.14286rem;font-size:0.92857rem;}
.u-icon-v3{width:3.92857rem;height:3.92857rem;font-size:1.57143rem;}
.u-icon-v3.u-icon-size--xs{width:2.14286rem;height:2.14286rem;font-size:0.92857rem;}
.g-bg-primary--hover:hover{background-color:#72c02c!important;}
.g-pos-abs{position:absolute!important;}
.g-top-0{top:0;}
.g-right-15{right:1.07143rem!important;}
.g-cursor-pointer{cursor:pointer;}
.g-color-white--hover:hover{color:#fff!important;}

/* Color Blue */
.g-color-blue {
  color: #3398dc !important;
}
/* Color Pink */
.g-color-pink {
  color: #e81c62;
}
/* Color Deep Orange */
.g-bg-deeporange {
  background-color: #fe541e !important;
}

.g-bg-deeporange-opacity-0_1 {
  background-color: rgba(254, 84, 30, 0.1) !important;
}

.g-bg-deeporange--hover:hover {
  background-color: #fe541e !important;
}

/*博客详情页中上、下一篇按钮*/
.g-pa-7-16 {
  padding: 0.5rem 1.14286rem !important;
}
.g-brd-gray-light-v3 {
  border-color: #ddd !important;
}

.g-brd-gray-light-v3--hover:hover, .g-brd-gray-light-v3--active.active, .g-brd-gray-light-v3--focus:focus {
  border-color: #ddd !important;
}

*:hover > .g-brd-gray-light-v3--hover-parent {
  border-color: #ddd !important;
}

/* 站内消息列表 */
.g-brd-primary-left {
  border-left-color: #72c02c !important;
}
.g-brd-primary-left--before:before {
  border-left-color: #72c02c !important;
}
.g-brd-blue-left {
  border-left-color: #3398dc !important;
}
.g-brd-red-left {
  border-left-color: #f00 !important;
}
.g-brd-purple-left {
  border-left-color: #9a69cb !important;
}
.g-brd-orange-left {
  border-left-color: #e57d20 !important;
}
.g-brd-yellow-left {
  border-left-color: #ebc71d !important;
}
.g-brd-aqua-left {
  border-left-color: #29d6e6 !important;
}
.g-brd-cyan-left {
  border-left-color: #00bed6 !important;
}
.g-brd-teal-left {
  border-left-color: #18ba9b !important;
}
.g-brd-brown-left {
  border-left-color: #9c8061 !important;
}
.g-brd-pink-left {
  border-left-color: #e81c62 !important;
}
.g-brd-black-left {
  border-left-color: #000 !important;
}
.g-brd-left-0 {
  border-left-width: 0 !important;
}

.g-brd-left-1 {
  border-left-width: 1px !important;
}

.g-brd-left-2 {
  border-left-width: 2px !important;
}

.g-brd-left-3 {
  border-left-width: 3px !important;
}

.g-brd-left-4 {
  border-left-width: 4px !important;
}
.g-mr-15 {
  margin-right: 1.07143rem !important;
}
.g-mt-2 {
  margin-top: 0.14286rem !important;
}
.g-height-40 {
  height: 40px;
}
.g-width-40 {
  width: 40px !important;
  /* P */
}
/* Black Colors */
.g-color-black {
  color: #000 !important;
}

.g-color-black--hover:hover {
  color: #000 !important;
}

.g-parent:hover .g-color-black--parent-hover {
  color: #000 !important;
}

/* badges */
.g-rounded-50x {
  border-radius: 50%;
}
.u-image-icon-size-md {
  width: 3.92857rem;
}
.g-ml-7 {
  margin-left: 0.5rem !important;
}
.g-mt-7 {
  margin-top: 0.5rem !important;
}
/* Color Red */
.g-bg-red {
  background-color: #f00 !important;
}
/*------------------------------------
  Badges
------------------------------------*/
[class*="u-badge"] {
  position: absolute;
  display: inline-block;
  text-align: center;
  font-size: 0.92857rem;
  color: #555;
  z-index: 3;
}

[class*="u-badge"]:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  top: 0;
  right: 0;
  -webkit-transform: translate(50%, -50%);
      -ms-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

.u-badge--top-left {
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.u-badge--bottom-left {
  bottom: 0;
  left: 0;
  -webkit-transform: translate(-50%, 50%);
      -ms-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}

.u-badge--bottom-right {
  bottom: 0;
  right: 0;
  -webkit-transform: translate(50%, 50%);
      -ms-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}
/*------------------------------------
  Badges v2
------------------------------------*/
[class*="u-badge-v2"] {
  background-color: #72c02c;
  border-radius: 50%;
}

.u-badge-v2 {
  width: 14px;
  height: 14px;
}

.u-badge-v2--xs {
  width: 8px;
  height: 8px;
}

.u-badge-v2--sm {
  width: 12px;
  height: 12px;
}

.u-badge-v2--md {
  width: 14px;
  height: 14px;
}

.u-badge-v2--lg {
  width: 16px;
  height: 16px;
}

.u-badge-v2--xl {
  width: 18px;
  height: 18px;
}


/* 方框的头像 */
/* Padding Around */
.g-pa-2 {
  padding: 0.14286rem !important;
}

/* 聊天记录 */
.g-height-50vh--lg {
  height: 50vh !important;
}
.g-pa-25--lg {
  padding: 1.78571rem !important;
}
.g-pa-15 {
  padding: 1.07143rem !important;
}
.g-mb-12 {
  margin-bottom: 0.85714rem !important;
}
.g-mr-12 {
  margin-right: 0.85714rem;
}
.g-height-36 {
  height: 2.57143rem !important;
}
.g-width-36 {
  width: 36px !important;
  /* O */
}
.g-color-gray-dark-v6 {
  color: #53585e !important;
}

.g-color-gray-dark-v6--hover:hover, .g-color-gray-dark-v6--focus:focus, .g-color-gray-dark-v6--disabled:disabled, .g-color-gray-dark-v6--active.active, .g-color-gray-dark-v6--opened[aria-expanded="true"] {
  color: #53585e !important;
}

input[type="checkbox"]:checked + .g-color-gray-dark-v6--checked,
input[type="checkbox"]:checked + * + .g-color-gray-dark-v6--checked {
  color: #53585e !important;
}

.g-parent:hover .g-color-gray-dark-v6--parent-hover {
  color: #53585e !important;
}

.g-parent.active .g-color-gray-dark-v6--parent-active {
  color: #53585e !important;
}

.u-sibling.opened + .g-color-gray-dark-v6--sibling-opened {
  color: #53585e !important;
}
.g-bg-gray-light-v8 {
  background-color: #f5f9f9 !important;
}

.g-bg-gray-light-v8--hover:hover {
  background-color: #f5f9f9 !important;
}

.g-bg-gray-light-v8--active.active {
  background-color: #f5f9f9 !important;
}

.g-bg-gray-light-v8--disabled:disabled {
  background-color: #f5f9f9 !important;
}

input:checked + .g-bg-gray-light-v8--sibling-checked {
  background-color: #f5f9f9 !important;
}
.g-pa-10-15 {
  padding: 0.71429rem 1.07143rem !important;
}
.g-width-auto--sm {
  width: auto !important;
}
.g-width-400 {
  width: 300px !important;
  /* P */
}
.g-font-size-default--lg {
  font-size: 1rem !important;
}
.g-rounded-10 {
  border-radius: 10px !important;
}
.g-ml-50 {
  margin-left: 3.57143rem !important;
}
/* Gray Colors */
.g-color-gray-light-v1 {
  color: #bbb !important;
}

.g-color-gray-light-v1--hover:hover {
  color: #bbb !important;
}
.g-font-style-normal {
  font-style: normal;
}
.g-color-gray-dark-v6 {
  color: #53585e !important;
}

.g-color-gray-dark-v6--hover:hover, .g-color-gray-dark-v6--focus:focus, .g-color-gray-dark-v6--disabled:disabled, .g-color-gray-dark-v6--active.active, .g-color-gray-dark-v6--opened[aria-expanded="true"] {
  color: #53585e !important;
}

input[type="checkbox"]:checked + .g-color-gray-dark-v6--checked,
input[type="checkbox"]:checked + * + .g-color-gray-dark-v6--checked {
  color: #53585e !important;
}

.g-parent:hover .g-color-gray-dark-v6--parent-hover {
  color: #53585e !important;
}

.g-parent.active .g-color-gray-dark-v6--parent-active {
  color: #53585e !important;
}

.u-sibling.opened + .g-color-gray-dark-v6--sibling-opened {
  color: #53585e !important;
}
.g-bg-lightblue-v6 {
  background-color: #dbf4f4 !important;
}
.g-ml-12 {
  margin-left: 0.85714rem;
}
.g-mr-50 {
  margin-right: 3.57143rem !important;
}
.g-color-lightblue-v3 {
  color: #1cc9e4 !important;
}
/* Color Light Red */
.g-color-lightred {
  color: #e64b3b !important;
}
.g-color-lightred--hover:hover {
  color: #e64b3b !important;
}
.g-color-lightred-v3 {
  color: #e12254 !important;
}
.g-font-size-10 {
  font-size: 0.71429rem !important;
}